<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :width="cWidth"
    :before-close="handleClose"
    class="portal-dialog"
    :destroy-on-close="destroyOnClose"
    append-to-body
    :fullscreen="fullscreen"
  >
    <div slot="title" class="header">
      <div class="headerR">
        <div class="icon triangle-icon" />
        <div class="title">
          <span>{{ title }}</span>
          <span v-if="subTitle" class="subTitle">{{ subTitle }}</span>
        </div>
      </div>
    </div>
    <div v-if="showToolBar" class="toolBar">
      <el-button type="default" size="mini" @click="handClickFun">编辑</el-button>
    </div>
    <div class="content" :style="cContentStyle">
      <slot name="content" />
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="comfireFun">取 消</el-button>
      <el-button type="primary" @click="defineFun">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'PortalDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    showToolBar: {
      type: Boolean,
      default: true
    },
    width: {
      type: [Number, String],
      default: '70%'
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      noresize: true
    }
  },
  computed: {
    cWidth() {
      const width = this.width.toString()
      return width.indexOf('%') > -1 ? this.width : width + 'px'
    },
    cContentStyle() {
      if (this.fullscreen) {
        const wHeight = window.innerHeight - 40 - 70
        return this.showToolBar ? { height: (wHeight - 50) + 'px' } : { height: wHeight + 'px' }
      }
      return this.showToolBar ? { height: 400 + 'px' } : { height: 450 + 'px' }
    }
  },
  methods: {
    upDateScroll() {
      this.$refs.scrollbar.update()
    },
    // 取消
    comfireFun() {
      this.$emit('comfireFun')
    },
    // 确定
    defineFun() {
      this.$emit('defineFun')
    },
    // 关闭model
    handleClose() {
      this.$emit('comfireFun')
    },
    handClickFun() {
      this.$emit('editCilck')
    }
  }
}
</script>

<style lang="less" scoped>
// .triangle {
//   width: 0;
//   height: 0;
//   border: 6px solid transparent;
//   .borderColor(border-left-color);
//   top: 1px;
// }
.portal-dialog {
  /deep/ .el-dialog.is-fullscreen{
    overflow: hidden;
  }
  /deep/ .el-dialog__header {
    padding: 8px;
    height: 40px;
    padding: 0px;
    .header {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ebe9f3;
      padding: 8px;
      .headerR {
        display: flex;
        position: relative;
        .triangle-icon {
        position: relative;
        width: 2px;
        height: 17px;
        .bgColor();
        top: -1px;
        display: inline-block;
        margin-right: 5px;
      }
        .title {
          .color();
          position: relative;
          left: 10px;
          .subTitle {
            color: #666;
          }
        }
      }
      .headerL {
        cursor: pointer;
      }
      .icon {
        position: absolute;
        left: 5px;
      }
    }
    /deep/ .el-dialog__headerbtn {
      top: 10px;
      right: 10px;
    }
  }
  /deep/ .el-dialog__body {
    padding: 8px;
    // height: 400px;
    // height: 450px;
    .content {
      overflow: auto;
      overflow-x: hidden;
    }
  }
  .toolBar {
    // height: 30px;
    width: 100%;
    padding: 10px;
  }

  .el-table__body-wrapper.is-scrolling-none {
    height: 100% !important;
  }
  .el-table__body-wrapper{
    height: 100% !important;
  }
}
</style>